<template>
  <div>
    <my-breadcrumb :items="['商品管理', '商品二维码']"></my-breadcrumb>
    <div class="select">
      <div v-for="(select, index) in selectList" :key="index" class="item">
        <img :src="staticUrl + select.skuImagePath" alt="sku图片" width="40" style="float: left;">
        <div class="info">
          <p>商品：{{ select.title }}</p>
          <p>sku：{{ select.goodsSkuName }}</p>
        </div>
        <span style="float: right;line-height: 40px;cursor: pointer;"><Icon type="close-round" @click="removeSku(index)"></Icon></span>
      </div>
    </div>
    <div style="margin: 10px 0;">
      <Button @click="toPrint" type="primary" :disabled="!selectList[0]">打印选中商品二维码</Button>
      <!--<Button @click="setAll" type="primary">全选本页商品</Button>-->
    </div>
    <Table :data="skus" :columns="skuColumns"></Table>
    <page-info :page="page" @pageNumChange="pageChange" @pageSizeChange="pageChange"></page-info>
    <sku-code ref="code" v-show="showCode"></sku-code>
  </div>
</template>

<script>
import pageInfo from '../../common/pageInfo'
import skuCode from './skuCode'
export default {
  name: 'sku-list',
  data () {
    return {
      skus: [],
      skuColumns: [
        {
          type: 'index',
          width: 50
        },
        {
          title: '货号',
          key: 'articleNumber',
          align: 'center',
          width: 80
        },
        {
          title: '商品',
          render: (h, params) => {
            return h('div', [
              h('Avatar', {
                props: {
                  size: 'large',
                  shape: 'square',
                  src: this.staticUrl + params.row.skuImagePath
                }
              }),
              h('span', params.row.title),
              h('span', {
                style: {
                  fontWeight: '800'
                }
              }, ' · '),
              h('span', params.row.goodsSkuName)
            ])
          }
        },
        {
          title: '零售价',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.retailPrice / 100 + '￥')
          },
          width: 90
        },
        {
          title: '销量',
          key: 'sales',
          align: 'center',
          width: 90
        },
        {
          title: '库存',
          key: 'stock',
          align: 'center',
          width: 90
        },
        {
          title: '操作',
          width: 150,
          render: (h, params) => {
            return h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              on: {
                click: () => {
                  this.addToList(params.row)
                }
              }
            }, '添加打印')
          }
        }
      ],
      page: {
        pageNum: 1,
        pageSize: 15,
        total: 0
      },

      // 以选择列表
      selectList: [],
      showCode: false
    }
  },
  methods: {
    addToList (row) {
      /*
      * 添加sku
      * 1、添加到本页显示sku(selectList),先检查是否已经选中
      * 2、调用$refs.组件方法，向二维码页面添加数据，生成二维码（不可见）
      * */
      let have = false
      this.selectList.forEach(item => {
        if (item.skuId === row.skuId) {
          have = true
        }
      })
      if (have) {
        this.$Message.warning('你已经添加过该商品了')
      } else {
        this.selectList.push(row)
        this.$refs.code.setList(row)
      }
    },
    setAll () {
      let selectIds = []
      this.selectList.forEach(item => {
        selectIds.push(item.skuId)
      })
      this.skus.forEach(item => {
        if (selectIds.indexOf(item.skuId) === -1) {
          this.selectList.push(item)
          this.$refs.code.setList(item)
        }
      })
      this.$Message.success('已全部添加')
    },

    removeSku (index) {
      /*
      * 移除以选择sku
      * 1、移除本页顶部sku
      * 2、移除二维码打印页sku（不可见）
      * */
      this.$Modal.confirm({
        title: '删除',
        content: '你确定删除选中的商品吗？',
        onOk: () => {
          this.selectList.splice(index, 1)
          this.$refs.code.removeSku(index)
        }
      })
    },
    toPrint () {
      /*
      * 通知组件打印
      * */
      this.$Modal.confirm({
        title: '温馨提示',
        content: '你确定选好了商品吗？下一步操作将无法返回',
        onOk: () => {
          this.$refs.code.getInnerHtml()
        }
      })
    },

    // 分页查询
    pageChange (page) {
      this.page = page
      this.pageQuery()
    },
    // 初始化列表
    pageQuery () {
      this.$ajax.post('/goods/manage/get/goods/sku/list/qrcode/page', {pageNum: this.page.pageNum, pageSize: this.page.pageSize})
        .then(res => {
          if (res.data.success) {
            this.page.total = res.data.data.total
            this.skus = res.data.data.list
          }
        })
    }
  },
  components: {
    pageInfo,
    skuCode
  },
  created () {
    this.pageQuery()
  }
}
</script>

<style scoped>
  .select{
    overflow: hidden;
    border-left: 1px solid #dddee1;
    border-top: 1px solid #dddee1;
  }
  .item{
    float: left;
    padding: 8px;
    border-bottom: 1px solid #dddee1;
    border-right: 1px solid #dddee1;
  }
  .item:hover{
    background-color: #f8f8f9;
  }
  .info{
    float: left;
    margin-left: 6px;
    margin-right: 10px;
  }
  .info p{
    line-height: 20px;
  }
</style>
